<template>
  <div class="login">
    <div class="content">
      <div class="popup">
        <img src="@/assets/cn.png" class="lang" />
        <img src="@/assets/logo.png" class="logo" />
        <div class="inputGroup" :class="{ inputError: uInputError.account }">
          <h2>账号:</h2>
          <el-input
            v-model="uInput.account"
            placeholder="Email Address"
          ></el-input>
          <p class="errInfo" v-show="uInputError.account">
            请输入正确的用户名!
          </p>
        </div>
        <div class="inputGroup" :class="{ inputError: uInputError.password }">
          <h2>密码:</h2>
          <el-input
            v-model="uInput.password"
            placeholder="Your Password"
            show-password
          ></el-input>
          <p class="errInfo" v-show="uInputError.password">密码</p>
        </div>
        <router-link to="/" class="forgetPassword"> 忘记密码 </router-link>
        <el-button type="primary" class="loginBtn" @click.stop="loginClick">
          登录
        </el-button>
      </div>
    </div>

    <footer>
      <img src="@/assets/seeed.png" class="seeed" />
      <div class="copyright">
        <p>© 2008-2021 "lang.compony"</p>
        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
          >粤ICP备13058720号</a
        >
      </div>
      <router-link to=""> "lang.privacy"</router-link>
      <img src="@/assets/mcafee.png" class="mcafee" />
    </footer>
  </div>
</template>

<script setup>
import { useStore } from "@/store/useStore";
import { useRouter } from "vue-router";
import { storeToRefs } from "pinia";
import * as api from "@/api/index";
import { reactive } from "vue";
import { routes, managerRoutes, superRoutes } from "@/router/routes";
// import guard from "@/router/guard";

const store = useStore();
const router = useRouter();
let { username, token, type } = storeToRefs(store);

const uInput = reactive({
  account: "super",
  password: "super",
});
const uInputError = reactive({
  account: false,
  password: false,
});

//点击登录
const loginClick = () => {
  let data = uInput;
  // console.log(data);

  api.$accountLogin(data).then((res) => {
    // console.log(res);
    username.value = res.data.username;
    // type.value = res.data.type;
    store.setType(res.data.type);
    token.value = res.token;
    // isLogin.value = true;

    //     // 判定用户类型
    //     if(type.value == 1){
    //       superRoutes.forEach(route=>{
    //         //动态添加路由
    //         router.addRoute(route);
    //       })
    //       //将路由表传入pinia中
    //       // 方式1
    //       // store.$patch(state=> {
    //       //   state.routes = superRoutes;
    //       // });
    // // 方式2
    //       store.setRoutes(superRoutes);
    //     }else if(type.value == 2){
    //       managerRoutes.forEach(route=>{
    //         //动态添加路由
    //         router.addRoute(route);
    //       })
    //       store.setRoutes(managerRoutes);
    //     }else{
    //       routes.forEach(route=>{
    //         //动态添加路由
    //         router.addRoute(route);
    //       })
    //       store.setRoutes(routes);
    //     }

    if (store.type == 1) {
      superRoutes.forEach((route) => {
        //动态添加路由
        router.addRoute(route);
      });
      store.setRoutes(superRoutes);
    } else if (store.type == 2) {
      managerRoutes.forEach((route) => {
        //动态添加路由
        router.addRoute(route);
      });
      store.setRoutes(managerRoutes);
    } else {
      routes.forEach((route) => {
        //动态添加路由
        router.addRoute(route);
      });
      store.setRoutes(routes);
    }

    // guard();
    //路由跳转
    router.push("/home/index");
  });
};
</script>

<style lang="less" scoped>
@import "./index.less";
</style>

